@import '../../css/colorVar.less';

.menuBox {
  padding-right: 12px;
  background: white;
  height: 77vh;
  display: flex;


  :global {
    .ant-menu-submenu-title {
      padding: 0 0 0 20px !important;
      background-color: white !important;
      color: rgba(0, 0, 0, 0.65) !important;
    }

    .ant-menu-submenu-arrow:before,
    .ant-menu-submenu-arrow:after {
      width: 0 !important;
      height: 0 !important;
    }

    .ant-menu-inline {
      border: 0;
    }

    .ant-menu:first-child {
      display: flex;
      flex-direction: column;
    }

    .ant-menu-sub {
      overflow-y: scroll;
      overflow-x: hidden;
      height: auto;
      flex: 1;
    }

    .ant-menu-submenu:nth-of-type(1) .ant-menu-sub {
      max-height: calc(100vh - 35px);
    }

    .ant-menu-submenu:nth-of-type(2) {
      flex: 1;
      overflow: hidden;
      display: flex;
      flex-direction: column;

      .ant-menu-sub:first-child {
        flex: 1;
      }
    }

    .ant-menu-item {
      background: @section_bg;
      box-sizing: content-box;
      padding: 0 !important;
      height: 30px !important;
      line-height: 30px !important;
      margin-bottom: 0 !important;
      margin-top: 0 !important;
    }

    .ant-menu-sub .ant-menu-item:first-child {
      border-top: 6px solid @section_bg;
    }

    .ant-menu-sub .ant-menu-item:last-child {
      border-bottom: 6px solid @section_bg;
    }


    .ant-menu-inline .ant-menu-item:after {
      left: 0;
      right: auto;
    }

    .ant-menu-item-active {
      background-color: #e6f7ff !important;
      color: @text_main  !important;

      .menu-item {
        .icon {
          transition: all 0.05s ease 0.1s;
          -moz-transition: all 0.05s ease 0.1s;
          /* Firefox 4 */
          -webkit-transition: all 0.05s ease 0.1s;
          /* Safari 和 Chrome */
          -o-transition: all 0.05s ease 0.1s;
          /* Opera */
          height: 14px !important;
        }
      }
    }

    .menu-title {
      display: flex;
      justify-content: space-between;
      font-weight: 500;
      color: @text_main;

      .title-right,
      .title-right-select {
        position: relative;
      }

      .title-right:before {
        content: "";
        border-left: 5px solid @theme;
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        position: absolute;
        left: -15px;
        top: calc(50% - 10px);
      }

      .title-right-select:before {
        content: "";
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 5px solid @theme;
        position: absolute;
        left: -20px;
        top: calc(50% - 5px);
      }

      .menu-title-left {
        display: flex;
        align-items: center;
        color: @theme;

        .icon {
          width: 14px;
          height: 14px;
          margin-right: 8px;
        }
      }

    }

    .menu-list {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0 16px 0 20px;

      span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 190px;
      }

      .menu-item {
        display: flex;

        .pop-confirm {
          position: absolute;
          top: 0;
          left: 0;
        }

        .icon {
          width: 14px;
          height: 0;
          margin-right: 14px;
        }
      }

    }

  }
}

.selectBox {
  :global {
    .ant-menu-submenu:nth-of-type(1) .ant-menu-sub {
      max-height: calc(100vh - 65px);
    }
  }
}

:global {
  .addModal {

    .ant-modal-body {
      overflow: auto;
    }
  }
}
